<extend name="zh_tw:Public:base" />
<block name="title">
    <title>美住 - 會員管理</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=bdf8875f9e52f651ec877dc7073586e5">
    <link rel="stylesheet" href="__PUBLIC__/jslib/bootstrap-datepicker/css/bootstrap-datepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="/Public/dist/Home/CustomerPage/customer.css?rev=cd47d17ebbe7fbb3621c66c75f223297">
</block>
<block name="document">
    <div id="doc" class="container-above-md">
        <include file="zh_tw:Public:Include_control_navbar" navbar-menu-customer="active" />
        <div id="doc-body" class="row">
            <include file="zh_tw:Public:Include_setting_side" doc-side-customer="active" />
             <div id="doc-center">
                <div class="content-panel">
                    <div class="content-panel-header" id="filterHeaderTabContainer">
                        <include file="zh_tw:Public:Include_customer_tab" booking-tab-vip="btn-primary" />
                    </div>
                </div>
                <div id="filterHeader" class="typo-text-black-deep">
                    <div class="border-box">
                        <div class="row">
                            <input id="filterMobile" class="form-control" type="text" autocomplete="off" placeholder="手機號" maxlength="11" value="" />
                        </div>
                    </div>
                    <div class="btn-sm btn-accent btn-raised" id="filterSearch">查詢</div>
                </div>
                <div class="content-panel" id="filterResult">
                    <include file="zh_tw:Public:Include_content_loading" loading-container-id="loading" />
                    <div class="content-panel-body">
                        <table class="table content-panel-table vertical-margin">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>
                                        <div class="dropdown dropdown-hover">
                                            <ul class="dropdown-menu dropdown-menu-left" id="search-level">
                                                <volist name="vipInfos" id="vipInfo">
                                                    <li data-value="{$vipInfo['id']}"><a href="javascript:void(0);">{$vipInfo['name']}</a></li>
                                                </volist>
                                            </ul>
                                            <a data-toggle="dropdown" class="without-min-width btn text-sm vip-dropdown search-vip-dropdown" data-value="1" href="javascript:void(0);" aria-expanded="true"><span class="info" id="search-level-info">等級</span><span class="caret"></span></a>
                                        </div>
                                    </th>

                                    <th>手機號</th>
                                    <th>證件號</th>
                                    <th>消費金額</th>
                                    <th>卡余額</th>
                                    <th>
                                        <if condition="$initInfo.share eq 1">
                                            <div class="dropdown dropdown-hover">
                                                <ul class="dropdown-menu dropdown-menu-left" id="search-hotel">
                                                    <li data-value="1"><a href="javascript:void(0);">所有客棧</a></li>
                                                </ul>
                                                <a data-toggle="dropdown" class="without-min-width btn text-sm vip-dropdown search-vip-dropdown" data-value="1" href="javascript:void(0);" aria-expanded="true"><span class="info" id="search-hotel-info">入住次數</span><span class="caret"></span></a>
                                            </div>
                                        <else />
                                            入住次數
                                        </if>
                                    </th>
                                    <th>更多</th>
                                </tr>
                            </thead>
                            <tbody id="customerListBody">
                            </tbody>
                        </table>
                        <div id="customerListBodyEmpty" class="typo-text-black-light typo-subhead">沒有找到符合該條件的會員信息</div>
                    </div>
                    <div id="customerListPage" class="content-panel-footer hidden">
                        <div class="pull-right">
                            <ul class="pagination pagination-sm"></ul>
                        </div>
                        <div class="pull-right content-panel-pagination-info">
                            共有&nbsp;<span class="text-accent page-total"></span>&nbsp;條記錄，總頁數：&nbsp;<span class="text-accent page-count"></span>
                        </div>
                    </div>
                </div>	
                <if condition="$init eq 0">
                    <if condition="checkAccess($adminAuthority, 'Home/CustomerPage/vipSetting')">
                        <a href="/Home/CustomerPage/vipSetting.html?hotel={$currentHotel}" class="btn btn-raised btn-primary">會員設置</a>
                    </if>
                <else />
                    <a href="#" class="btn btn-raised btn-primary" id="add-vip-modal" data-toggle="modal" data-target="#addVipModel">添加會員</a>
                </if>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
	<!-- 添加會員模态框 -->    
    <div class="modal fade" id="addVipModel">
        <div class="modal-dialog modal-bg">
            <div class="modal-content">
               <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="modal-title">添加會員</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-sm" id="add-vip-form">
                        <div class="form-group">
                            <label class="col-xs-2 control-label"><span class="text-accent star-accent">*</span>姓名：</label>
                            <div class="col-xs-3">
                                <input type="text" class="form-control" id="addName" autocomplete="off" value="">
                            </div>
                            <label class="col-xs-2 control-label">性別：</label>
                            <div class="col-xs-3">
                                <select class="form-control" id="addGender">
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">生日：</label>
                            <div class="col-xs-3">
                                <input type="text" class="form-control" id="addBirthday" autocomplete="off" value="">
                            </div>
                            <label class="col-xs-2 control-label">民族：</label>
                            <div class="col-xs-3">
                                <input type="text" class="form-control" id="addNation" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label"><span class="text-accent star-accent">*</span>手機：</label>
                            <div class="col-xs-6">
                                <include file="zh_tw:Public:Include_area_code" style=''  />
                                <input type="text" class="form-control paddingArea" id="addMobile" maxlength="11" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label"><span class="text-accent star-accent">*</span>等級：</label>
                            <div class="col-xs-6">
                                <select class="form-control" id="addLevel">
                                    <volist name="vipInfos" id="vipInfo">
                                        <option value="{$vipInfo['id']}">{$vipInfo['name']}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">身份證：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" maxlength="18" id="addIdentity" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">住址：</label>
                            <div class="col-xs-8">
                                <input type="text" class="form-control" id="addAddress" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">微信：</label>
                            <div class="col-xs-6">
                                <input type="text" class="form-control" id="addWechat" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">備註：</label>
                            <div class="col-xs-8">
                                <textarea class="form-control" id="addRemark" rows="2"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <span id="add-vip-info" class="help-info"></span>
                    <button id="add-vip" type="button" data-share="{$initInfo.share}" class="btn-primary btn-raised ulite-js-btn ulite-js-ripple-effect">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div id="editVipModel" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content edit-vip-modal">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="modal-title">會員信息</div>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="guestnone" id="editVipActive">
                            <div class="guestdetail" id="guestdetail">
                                <ul class="cntlist guestbasic clx">
                                    <li class="over">
                                        <tt class="lab">姓名：</tt>
                                        <span class="value" tag="guestname">
                                            <input type="text" id="editName" disabled="disabled">
                                        </span>
                                        <tt class="lab" id="sex">性別：</tt>
                                        <span tag="sex">
                                            <div class="dropdown dropdown-sex">
                                                <ul class="dropdown-menu dropdown-menu-left" id="dropdown-gender-ul">
                                                    <li data-value="0"><a href="javascript:void(0);">男</a></li>
                                                    <li data-value="1"><a href="javascript:void(0);">女</a></li>
                                                </ul>
                                                <a data-toggle="dropdown" id="level-dropdown" class="without-min-width btn text-sm  vip-dropdown disabled" data-value="1" href="javascript:void(0);" aria-expanded="true">&nbsp;&nbsp;&nbsp;&nbsp;<span class="info" id="gender-info">男</span></a>
                                            </div>
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">生日：</tt>
                                            <span class="value" tag="brithday">
                                                <input type="text" id="editBirthday" value="1993-06-28" disabled="disabled">
                                            </span>
                                        <tt class="lab" id="nation">民族：</tt>
                                        <span tag="nation">
                                            <input type="text" id="editNation" disabled="disabled">
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">住址：</tt>
                                        <span tag="address">
                                            <input type="text" id="editAddress" disabled="disabled">
                                        </span>
                                    </li>
                                </ul>
                                <ul class="cntlist guestdetail_edit" tag="editable">
                                    <li class="over">
                                        <tt class="lab">手機：</tt>
                                            <span class="t14" tag="mobile">
                                                <include file="zh_tw:Public:Include_area_code" style=''  />
                                                <input type="text" id="editMobile" class="paddingArea" maxlength="11" disabled="disabled">
                                            </span>
                                    </li>
                                    <li class="over">
                                        <div class="">
                                            <tt class="lab">等級：</tt>
                                                <span class="value" tag="value">
                                                    <div class="dropdown">
                                                        <ul class="dropdown-menu dropdown-menu-left" id="dropdown-level-ul">
                                                            <volist name="vipInfos" id="vipInfo">
                                                                <li data-value="{$vipInfo['id']}"><a href="javascript:void(0);">{$vipInfo['name']}</a></li>
                                                            </volist>
                                                        </ul>
                                                        <a data-toggle="dropdown" id="level-dropdown" class="without-min-width btn text-sm  vip-dropdown disabled" data-value="1" href="javascript:void(0);" aria-expanded="true">&nbsp;&nbsp;&nbsp;&nbsp;<span class="info" id="level-info"></span></a>
                                                    </div>
                                                </span>
                                        </div>
                                    </li>

                                    <li class="over">
                                        <tt class="lab">證件號碼：</tt>
                                        <span class="" tag="identity">
                                            <input type="text" id="editIdentity" maxlength="18" disabled="disabled">
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">微信：</tt>
                                         <span class="" tag="wechat">
                                            <input type="text" id="editWechat" disabled="disabled">
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab" id="remark">備註：</tt>
                                        <textarea name="remark" id="editRemark" disabled="disabled"></textarea>
                                    </li>
                                    <li class="over">
                                        <div id="edit-vip-info" class="help-info"></div>
                                        <a tag="edit" class="btn btn-raised btn-primary" data-share="{$initInfo.share}" id="edit-vip" href="javascript:;">編輯</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="guesthistory typo-text-black-light text-sm" id="orderhistory">
                                <div id="orderRecordContainer">
                                    
                                    
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!--VIP充值-->
    <div id="rechargeModel" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content edit-vip-modal">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="modal-title">充值詳情</div>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="guestnone">
                            <div class="guestdetail">
                                <ul class="cntlist guestbasic clx">
                                    <li class="over" style="margin-top: 8px;">
                                        <tt class="lab">充值金額：</tt>
                                        <span class="value">
                                            <input type="text" id="rechargePrice" placeholder="請輸入充值金額" class="form-control"  >
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">支付方式：</tt>
                                        <span class="value">
                                            <div class="dropdown">
                                                <ul class="dropdown-menu dropdown-menu-left rechargeReceiveTypeMenu" >
                                                    <volist name="hotelpay" id="pay">
                                                        <if condition="$key eq 0">
                                                            <li class="active" data-value="{$pay.id}"><a href="javascript:void(0);">{$pay.name}</a></li>
                                                            <else/>
                                                            <li data-value="{$pay.id}"><a href="javascript:void(0);">{$pay.name}</a></li>
                                                        </if>
                                                    </volist>
                                                </ul>
                                                <a data-toggle="dropdown" id="pay-type" class="without-min-width btn text-sm " data-value="{$hotelpay[0]['id']}" href="javascript:void(0);"><span class="info">{$hotelpay[0]['name']}</span></a>
                                            </div>                                            
                                        </span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">驗證碼：</tt>
                                        <span class="value" style="width: 115px;">
                                            <input type="text" id="rechargeVerification" placeholder="請輸入驗證碼" class="form-control"  >                                   
                                        </span>
                                        <div style="float: right;margin-right: 65px;">
                                            <img id="imgcode" onclick="javascript:refreshVcode();" src="{:U('/Home/Public/createpic');}">
                                        </div>
                                    </li>
                                    <li class="over">
                                        <tt class="lab">原余額：</tt>
                                        <span class="value">{$hotelDefaultSymbol}<span class="original-balance">0.00</span></span>
                                    </li>
                                    <li class="over hidden">
                                        <tt class="lab">充值後余額：</tt>
                                        <span class="value">{$hotelDefaultSymbol}<span class="refill-balance">0.00</span></span>
                                    </li>
                                    <li class="over">
                                        <tt class="lab remark">備註：</tt>
                                        <span class="value">
                                            <textarea id="refill-remark" maxlength="100" class="form-control"></textarea>
                                        </span>
                                    </li>
                                    <li class="over" style="position: absolute;bottom: -80px;">
                                        <div id="recharge-vip-info" class="help-info"></div>
                                        <a class="btn btn-raised btn-primary" data-share="{$initInfo.share}" id="submitRecharge" href="javascript:;">充值</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="guesthistory typo-text-black-light text-sm" id="orderRecordContainer">
                                <div id="orderRechargeContainer">
                                    
                                    
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>    
   <!--js要用到的模板-->
    <script type="text/html" id="templatePage">
        <li>
            <a href="javascript:void(0);"></a>
        </li>
    </script>
    <!--js要用到的模板-->
    <script type="text/html" id="templateOrder">
        <div class="order-record row">
            <div class="col-xs-2">
                <div class="date"></div>
                <div class="time"></div>
            </div>
            <div class="col-xs-9 order-record-detail">
                <div class="order-record-header row">
                    <div class="pull-left">
                        <span class="from"></span>
                    </div>
                    <div class="pull-right text-info by"></div>
                    <div class="glyphicon glyphicon-grain"></div>
                </div>
                <div class="order-record-content">
                    <p class="price-info"></p>
                    <p class="operating-info"></p>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="templateCustomer">
        <tr>
            <td class="col-xs-1">
                <div class="vip-name"></div>
            </td>
            <td class="col-xs-1">
                <div class="vip-level"></div>
            </td>
            <td class="col-xs-2">
                <div class="vip-mobile"></div>
            </td>
            <td class="col-xs-2">
                <div class="vip-identity"></div>
            </td>
            <td class="col-xs-2">
                <div class="vip-total"></div>
            </td>
            <td class="col-xs-1">
                <div class="vip-balance"></div>
            </td>
            <td class="col-xs-1">
                <div class="vip-time"></div>
            </td>
            <td class="col-xs-2">
                <div style="margin-right: 10px;" class="btn-link vip-detail" data-toggle="modal" data-target="#editVipModel">詳情</div>
                <div class="btn-link vip-recharge"  data-toggle="modal" data-target="#rechargeModel">充值</div>
            </td>
        </tr>
    </script>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=d2d95b4bdc49c83470f104e88d8458fd"></script>
    <script type="text/javascript" src="/Public/jslib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/CustomerPage/vip.js?rev=6451ecbb7e597e66cb42b428c132e6a1"></script>
</block>
